<template>
  <div class="an-goods">
    <van-nav-bar
      :title="title"
      left-text
      left-arrow
      :fixed="true"
      @click-left="clickBack"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <van-image class="an-main-img" :src="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="an-goods-body">
      <div class="an-money">
        ￥
        <strong>{{price}}</strong>
      </div>
      <div class="van-multi-ellipsis--l2 an-title">{{title}}</div>
      <div class="an-subtitle">
        <div>
          <van-icon name="points" />
          库存 {{stock}}
        </div>
        <div @click="clickCollect">
          <van-icon name="like" color="#ee0a24" v-if="isCollect" />
          <van-icon name="like-o" v-else />收藏
        </div>
        <div>
          <van-icon name="share-o" />分享
        </div>
      </div>
    </div>

    <!-- 商品规格 当前只支持 单一规格选择 -->
    <div class="an-goods-Standard" v-if="options.length>0">
      <van-cell-group title="选择规格">
        <template v-for="item in options" :key="item.id">
          <van-cell
            v-if="item.children.length>0"
            is-link
            :title="item.name"
            :value="item.action"
            @click="item.show = true"
          />
          <van-action-sheet
            v-model:show="item.show"
            :actions="item.children"
            @select="(event)=>{this.onSelect(event, item)}"
          />
        </template>
      </van-cell-group>
    </div>

    <!-- 详情 -->
    <div class="an-goods-info">
      <div class="an-cont">
        <div v-html="goodsInfo.detail"></div>
      </div>
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="shop-o" text="首页" to="/" />
      <van-action-bar-icon icon="shopping-cart-o" text="购物车" :badge="number" to="/cart" />
      <van-action-bar-button type="warning" text="加入购物车" :disabled="stock==0" @click="addCart" />
      <van-action-bar-button type="danger" text="立即购买" :disabled="stock==0" />
    </van-action-bar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { isEmpty } from "@/utils/auth";
export default {
  props: {
    id: {
      // 商品ID
      type: String,
      default: "",
    },
  },
  data() {
    return {
      goodsInfo: {},
      price: "",
      stock: 0, // 库存
      images: [], // 主图
      title: "",
      options: [], // 商品规格
      goodsStandard: {}, // 选中的商品规格参数
      isCollect: 0, // 是否已经添加收藏
    };
  },
  computed: {
    ...mapState(["cartNumber"]),
    number() {
      if (this.cartNumber == 0) {
        return "";
      } else if (this.cartNumber > 99) {
        return 99;
      } else {
        return this.cartNumber;
      }
    },
  },
  watch: {
    id() {
      this.getData();
    },
  },
  created() {
    this.getData();
    this.getCollect();
  },
  methods: {
    isEmpty,
    // 规格选择
    onSelect(event, item) {
      item.show = false;
      item.action = event.name;
      this.activeStandard(event);
    },

    // 查询详情数据
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      this.$api.goodsInfo(this.id).then((res) => {
        this.$toast.clear();
        this.goodsInfo = res;
        this.title = res.name;
        this.price = res.price;
        this.stock = res.stock;
        if (res.mainPic && res.mainPic != "[]") {
          this.images = JSON.parse(res.mainPic);
        } else {
          // 如果没有主图用缩略图代替
          this.images = [res.image];
        }
        // 如果商品存在多规格 单选
        if (res.options) {
          let nd = JSON.parse(res.options);
          this.activeStandard(nd[0]);
          // 获取商品规格分类
          this.$store.dispatch("getGoodsSpec").then((type) => {
            type.forEach((item) => {
              let arry = [];
              nd.forEach((opt) => {
                if (item.id == opt.goodsSpecID) {
                  arry.push(opt);
                }
              });
              item.children = arry;
              item.show = false;
              // 默认选中第一个规格参数
              item.action = arry.length > 0 ? arry[0].name : "";
            });
            this.options = type;
          });
        } else {
          this.options = [];
        }
      });
    },

    // 查询是否收藏了该商品
    getCollect() {
      if (this.$store.state.isLogin) {
        let nd = {
          goodsID: this.id,
          userID: this.$store.state.userInfo.id,
          isCollect: 1, // 收藏
        };
        this.$api.includeCart(nd).then((res) => {
          this.isCollect = res;
        });
      }
    },

    // 商品规格改变
    activeStandard(val) {
      this.goodsStandard = val;
      this.price = val.price;
      this.stock = val.stock;
    },

    //  导航栏右侧 点击
    onClickRight() {
      this.$router.push({ path: "/search" });
    },

    // 加入购物车
    addCart() {
      this.$auth.addCart(this.goodsInfo, this.goodsStandard);
    },

    // 加收藏
    clickCollect() {
      this.$auth.addCollect(this.id, this.isCollect);
      this.isCollect = this.isCollect ? 0 : 1;
    },

    // 返回
    clickBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../css/mixin.scss";
.an-goods {
  padding-top: 46px;
  padding-bottom: 50px;
  .an-main-img {
    width: 100%;
    min-height: 200px;
  }
  .an-goods-body {
    padding: 15px;
    margin-bottom: 0px;
    background-color: #ffffff;
    .an-money {
      color: $red;
      strong {
        font-size: 18px;
      }
    }
    .an-title {
      padding: 10px 0;
      font-size: 16px;
    }
    .an-subtitle {
      padding: 10px 0;
      color: $gray-6;
      display: flex;
      justify-content: space-between;
    }
  }
  .an-goods-Standard {
    margin-bottom: 10px;
  }
  .an-goods-info {
    .an-cont {
      background-color: #ffffff;
    }
  }
}
</style>